<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>数据看板系统 - 数据排行榜</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    /* 全局样式 - 科技感设计 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "Microsoft YaHei", Arial, sans-serif;
    }
    
    body {
      background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
      padding: 20px;
      color: #e2e8f0;
      min-height: 100vh;
    }
    
    .container {
      max-width: 1400px;
      margin: 0 auto;
      background: rgba(15, 23, 42, 0.8);
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(94, 234, 212, 0.2);
    }
    
    header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 30px;
      padding-bottom: 20px;
      border-bottom: 1px solid rgba(94, 234, 212, 0.3);
    }
    
    .logo {
      display: flex;
      align-items: center;
      gap: 15px;
    }
    
    .logo-icon {
      width: 50px;
      height: 50px;
      background: linear-gradient(135deg, #0ea5e9 0%, #0d9488 100%);
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: white;
      box-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
    }
    
    .logo-text {
      font-size: 28px;
      font-weight: 700;
      color: #f8fafc;
      text-shadow: 0 0 10px rgba(56, 189, 248, 0.5);
    }
    
    .logo-text span {
      color: #5eead4;
    }
    
    .nav-buttons {
      display: flex;
      gap: 15px;
    }
    
    .nav-button {
      background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
      color: white;
      padding: 12px 25px;
      border-radius: 8px;
      text-decoration: none;
      font-weight: 600;
      box-shadow: 0 4px 15px rgba(124, 58, 237, 0.4);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 8px;
      border: 1px solid rgba(167, 139, 250, 0.3);
    }
    
    .nav-button:hover {
      transform: translateY(-3px);
      box-shadow: 0 6px 20px rgba(124, 58, 237, 0.6);
      background: linear-gradient(135deg, #8b5cf6 0%, #6366f1 100%);
    }
    
    .nav-button.active {
      background: linear-gradient(135deg, #5b21b6 0%, #4338ca 100%);
    }
    
    .page-title {
      text-align: center;
      font-size: 36px;
      margin: 20px 0 40px;
      background: linear-gradient(90deg, #f59e0b, #8b5cf6, #ec4899);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
    }
    
    .page-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 200px;
      height: 3px;
      background: linear-gradient(90deg, #f59e0b, #8b5cf6, #ec4899);
      border-radius: 3px;
    }
    
    /* 筛选控制区域 */
    .filter-controls {
      background: linear-gradient(135deg, rgba(30, 41, 59, 0.8) 0%, rgba(15, 23, 42, 0.9) 100%);
      padding: 30px;
      border-radius: 20px;
      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
      margin-bottom: 40px;
      border: 1px solid rgba(94, 234, 212, 0.2);
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
      gap: 25px;
      position: relative;
      overflow: hidden;
    }
    
    .filter-controls::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent 30%, rgba(94, 234, 212, 0.05) 50%, transparent 70%);
      animation: filterShimmer 3s ease-in-out infinite;
      pointer-events: none;
    }
    
    @keyframes filterShimmer {
      0%, 100% { transform: translateX(-100%); }
      50% { transform: translateX(100%); }
    }
    
    .filter-group {
      display: flex;
      align-items: center;
      gap: 15px;
      position: relative;
      z-index: 1;
    }
    
    .filter-label {
      font-weight: 700;
      color: #e2e8f0;
      display: flex;
      align-items: center;
      gap: 10px;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
    
    .filter-label i {
      color: #f59e0b;
      font-size: 18px;
      animation: iconPulse 2s ease-in-out infinite;
    }
    
    @keyframes iconPulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.1); }
    }
    
    .filter-select {
      padding: 15px 20px;
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.9) 100%);
      border: 2px solid rgba(94, 234, 212, 0.3);
      border-radius: 12px;
      font-size: 16px;
      color: #f8fafc;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23f59e0b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 15px center;
      padding-right: 45px;
      min-width: 220px;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      font-weight: 600;
    }
    
    .filter-select:focus {
      outline: none;
      border-color: #f59e0b;
      box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.3), 0 6px 20px rgba(0, 0, 0, 0.3);
      transform: translateY(-2px);
    }
    
    .filter-select:hover {
      border-color: #fbbf24;
      box-shadow: 0 4px 15px rgba(245, 158, 11, 0.2);
    }
    
    /* 下拉选项样式 */
    .filter-select option {
      background: rgba(15, 23, 42, 0.9) !important;
      color: #f8fafc !important;
      border: none !important;
      padding: 10px 15px !important;
    }
    
    .filter-select option:hover {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%) !important;
    }
    
    .filter-select option:checked {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(245, 158, 11, 0.2) 100%) !important;
      color: #fbbf24 !important;
    }
    
    /* 针对不同浏览器的下拉框样式 */
    .filter-select::-webkit-listbox {
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
      border: 1px solid rgba(94, 234, 212, 0.3) !important;
      border-radius: 8px !important;
    }
    
    .filter-select::-webkit-option {
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(30, 41, 59, 0.95) 100%) !important;
      color: #f8fafc !important;
      padding: 10px 15px !important;
    }
    
    .filter-select::-webkit-option:hover {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.2) 0%, rgba(245, 158, 11, 0.1) 100%) !important;
    }
    
    .filter-select::-webkit-option:checked {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.3) 0%, rgba(245, 158, 11, 0.2) 100%) !important;
      color: #fbbf24 !important;
    }
    
    .refresh-btn {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      color: white;
      border: none;
      padding: 15px 30px;
      border-radius: 12px;
      font-weight: 700;
      cursor: pointer;
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 16px;
      box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
      position: relative;
      z-index: 1;
      overflow: hidden;
    }
    
    .refresh-btn::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
      transition: left 0.5s ease;
    }
    
    .refresh-btn:hover::before {
      left: 100%;
    }
    
    .refresh-btn:hover {
      transform: translateY(-3px) scale(1.02);
      box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5);
      background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
    }
    
    .refresh-btn:active {
      transform: translateY(-1px) scale(0.98);
    }
    
    /* 排行榜容器 */
    .ranking-container {
      background: linear-gradient(135deg, rgba(30, 41, 59, 0.7) 0%, rgba(15, 23, 42, 0.9) 100%);
      padding: 30px;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
      border: 1px solid rgba(94, 234, 212, 0.1);
      margin-bottom: 30px;
      min-height: 500px;
      display: flex;
      flex-direction: column;
    }
    
    /* 前三名特殊样式 */
    .top-rank-container {
      display: flex;
      justify-content: center;
      align-items: flex-end;
      gap: 50px;
      margin-bottom: 60px;
      padding: 40px 20px;
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.9) 100%);
      border-radius: 24px;
      border: 1px solid rgba(94, 234, 212, 0.2);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
      position: relative;
      overflow: hidden;
    }
    
    .top-rank-container::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent 30%, rgba(245, 158, 11, 0.05) 50%, transparent 70%);
      animation: shimmer 4s ease-in-out infinite;
    }
    
    @keyframes shimmer {
      0%, 100% { transform: translateX(-100%); }
      50% { transform: translateX(100%); }
    }
    
    .top-rank-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 240px;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }
    
    .top-rank-item:hover {
      transform: translateY(-10px) scale(1.05);
    }
    
    .top-rank-1 {
      height: 360px;
      z-index: 3;
      transform: translateY(-20px);
    }
    
    .top-rank-2 {
      height: 320px;
      z-index: 2;
    }
    
    .top-rank-3 {
      height: 280px;
      z-index: 1;
    }
    
    .top-rank-medal {
      width: 100px;
      height: 100px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 40px;
      font-weight: bold;
      margin-bottom: 25px;
      color: white;
      position: relative;
      z-index: 2;
      transition: all 0.3s ease;
      animation: medalGlow 3s ease-in-out infinite alternate;
    }
    
    @keyframes medalGlow {
      0% { box-shadow: 0 0 25px rgba(245, 158, 11, 0.4); }
      100% { box-shadow: 0 0 35px rgba(245, 158, 11, 0.8); }
    }
    
    .top-rank-1 .top-rank-medal {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      box-shadow: 0 0 30px rgba(245, 158, 11, 0.8);
      border: 4px solid #fbbf24;
      animation: goldGlow 3s ease-in-out infinite alternate;
    }
    
    .top-rank-1 .top-rank-medal::before {
      content: '👑';
      font-size: 50px;
      position: absolute;
      top: -5px;
      right: -5px;
      background: white;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    @keyframes goldGlow {
      0% { 
        box-shadow: 0 0 30px rgba(245, 158, 11, 0.8);
        transform: scale(1);
      }
      100% { 
        box-shadow: 0 0 40px rgba(245, 158, 11, 1);
        transform: scale(1.08);
      }
    }
    
    .top-rank-2 .top-rank-medal {
      background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
      box-shadow: 0 0 25px rgba(148, 163, 184, 0.6);
      border: 4px solid #94a3b8;
      animation: silverGlow 3s ease-in-out infinite alternate;
    }
    
    .top-rank-2 .top-rank-medal::before {
      content: '🏅';
      font-size: 50px;
      position: absolute;
      top: -5px;
      right: -5px;
      background: white;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    @keyframes silverGlow {
      0% { 
        box-shadow: 0 0 25px rgba(148, 163, 184, 0.6);
        transform: scale(1);
      }
      100% { 
        box-shadow: 0 0 35px rgba(148, 163, 184, 0.8);
        transform: scale(1.05);
      }
    }
    
    .top-rank-3 .top-rank-medal {
      background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
      box-shadow: 0 0 25px rgba(249, 115, 22, 0.6);
      border: 4px solid #f97316;
      animation: bronzeGlow 3s ease-in-out infinite alternate;
    }
    
    .top-rank-3 .top-rank-medal::before {
      content: '⭐';
      font-size: 50px;
      position: absolute;
      top: -5px;
      right: -5px;
      background: white;
      border-radius: 50%;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    }
    
    @keyframes bronzeGlow {
      0% { 
        box-shadow: 0 0 25px rgba(249, 115, 22, 0.6);
        transform: scale(1);
      }
      100% { 
        box-shadow: 0 0 35px rgba(249, 115, 22, 0.8);
        transform: scale(1.03);
      }
    }
    
    .top-rank-info {
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.9) 100%);
      border-radius: 20px;
      padding: 25px;
      width: 100%;
      text-align: center;
      border: 2px solid rgba(94, 234, 212, 0.3);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      position: relative;
      overflow: hidden;
      transition: all 0.3s ease;
    }
    
    .top-rank-info::before {
      content: '';
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 100%;
      background: linear-gradient(90deg, transparent, rgba(245, 158, 11, 0.1), transparent);
      transition: left 0.6s ease;
    }
    
    .top-rank-item:hover .top-rank-info::before {
      left: 100%;
    }
    
    .top-rank-name {
      font-size: 22px;
      font-weight: 700;
      margin-bottom: 15px;
      color: #f8fafc;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      position: relative;
      z-index: 1;
    }
    
    .top-rank-value {
      font-size: 32px;
      font-weight: bold;
      color: #f59e0b;
      text-shadow: 0 0 20px rgba(245, 158, 11, 0.3);
      position: relative;
      z-index: 1;
      animation: valuePulse 2s ease-in-out infinite;
    }
    
    @keyframes valuePulse {
      0%, 100% { transform: scale(1); }
      50% { transform: scale(1.08); }
    }
    
    /* 排名标签 */
    .rank-label {
      position: absolute;
      top: -15px;
      right: -15px;
      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
      color: white;
      font-size: 14px;
      font-weight: bold;
      padding: 6px 12px;
      border-radius: 15px;
      box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
      z-index: 3;
    }
    
    .top-rank-1 .rank-label {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4);
    }
    
    .top-rank-2 .rank-label {
      background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
      box-shadow: 0 4px 12px rgba(148, 163, 184, 0.4);
    }
    
    .top-rank-3 .rank-label {
      background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
      box-shadow: 0 4px 12px rgba(249, 115, 22, 0.4);
    }
    
    /* 排行榜表格 */
    .ranking-table {
      width: 100%;
      border-collapse: collapse;
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(30, 41, 59, 0.9) 100%);
      border-radius: 20px;
      overflow: hidden;
      border: 2px solid rgba(94, 234, 212, 0.3);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
      position: relative;
    }
    
    .ranking-table::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: linear-gradient(45deg, transparent 30%, rgba(245, 158, 11, 0.03) 50%, transparent 70%);
      animation: tableShimmer 5s ease-in-out infinite;
      pointer-events: none;
    }
    
    @keyframes tableShimmer {
      0%, 100% { transform: translateX(-100%); }
      50% { transform: translateX(100%); }
    }
    
    .ranking-table th,
    .ranking-table td {
      padding: 20px 25px;
      text-align: left;
      position: relative;
      z-index: 1;
    }
    
    .ranking-table th {
      background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
      font-weight: 700;
      color: #f8fafc;
      position: sticky;
      top: 0;
      border-bottom: 3px solid rgba(245, 158, 11, 0.3);
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
      font-size: 16px;
    }
    
    .ranking-table tr {
      border-bottom: 1px solid rgba(94, 234, 212, 0.1);
      transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
    }
    
    .ranking-table tr:hover {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.08) 0%, rgba(245, 158, 11, 0.03) 100%);
      transform: translateX(8px);
      box-shadow: 0 6px 20px rgba(245, 158, 11, 0.15);
    }
    
    .ranking-table tr:nth-child(1) td,
    .ranking-table tr:nth-child(2) td,
    .ranking-table tr:nth-child(3) td {
      font-weight: 700;
      position: relative;
    }
    
    .ranking-table tr:nth-child(1) td {
      color: #f59e0b;
      text-shadow: 0 0 12px rgba(245, 158, 11, 0.3);
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(245, 158, 11, 0.05) 100%);
    }
    
    .ranking-table tr:nth-child(1) td::before {
      content: '👑';
      position: absolute;
      left: -35px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 24px;
      animation: goldSparkle 2s ease-in-out infinite;
    }
    
    @keyframes goldSparkle {
      0%, 100% { transform: translateY(-50%) scale(1); }
      50% { transform: translateY(-50%) scale(1.3); }
    }
    
    .ranking-table tr:nth-child(2) td {
      color: #64748b;
      text-shadow: 0 0 10px rgba(100, 116, 139, 0.3);
      background: linear-gradient(135deg, rgba(148, 163, 184, 0.1) 0%, rgba(148, 163, 184, 0.05) 100%);
    }
    
    .ranking-table tr:nth-child(2) td::before {
      content: '🏅';
      position: absolute;
      left: -35px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 22px;
      animation: silverSparkle 2s ease-in-out infinite;
    }
    
    @keyframes silverSparkle {
      0%, 100% { transform: translateY(-50%) scale(1); }
      50% { transform: translateY(-50%) scale(1.2); }
    }
    
    .ranking-table tr:nth-child(3) td {
      color: #f97316;
      text-shadow: 0 0 10px rgba(249, 115, 22, 0.3);
      background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(249, 115, 22, 0.05) 100%);
    }
    
    .ranking-table tr:nth-child(3) td::before {
      content: '⭐';
      position: absolute;
      left: -35px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 20px;
      animation: bronzeSparkle 2s ease-in-out infinite;
    }
    
    @keyframes bronzeSparkle {
      0%, 100% { transform: translateY(-50%) scale(1); }
      50% { transform: translateY(-50%) scale(1.1); }
    }
    
    .rank-position {
      display: flex;
      align-items: center;
      gap: 15px;
      font-weight: 700;
    }
    
    .rank-number {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.9) 0%, rgba(30, 41, 59, 0.95) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid rgba(94, 234, 212, 0.3);
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
      font-weight: bold;
      transition: all 0.3s ease;
      color: #64748b;
    }
    
    .ranking-table tr:nth-child(1) .rank-number {
      background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
      border-color: #fbbf24;
      box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4);
      animation: rankGlow 2s ease-in-out infinite alternate;
      color: white;
    }
    
    .ranking-table tr:nth-child(2) .rank-number {
      background: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
      border-color: #94a3b8;
      box-shadow: 0 4px 15px rgba(148, 163, 184, 0.4);
      color: white;
    }
    
    .ranking-table tr:nth-child(3) .rank-number {
      background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
      border-color: #f97316;
      box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
      color: white;
    }
    
    @keyframes rankGlow {
      0% { box-shadow: 0 6px 20px rgba(245, 158, 11, 0.4); }
      100% { box-shadow: 0 8px 25px rgba(245, 158, 11, 0.6); }
    }
    
    .rank-value {
      font-weight: 700;
      color: #f59e0b;
      text-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
      animation: valueGlow 2s ease-in-out infinite alternate;
    }
    
    @keyframes valueGlow {
      0% { text-shadow: 0 0 10px rgba(245, 158, 11, 0.3); }
      100% { text-shadow: 0 0 15px rgba(245, 158, 11, 0.5); }
    }
    
    /* 加载动画 */
    .spinner {
      width: 50px;
      height: 50px;
      border: 5px solid rgba(94, 234, 212, 0.1);
      border-top: 5px solid #f59e0b;
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 100px auto;
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    /* 错误信息 */
    .error-message {
      text-align: center;
      padding: 60px 20px;
      color: #94a3b8;
    }
    
    .error-message i {
      font-size: 48px;
      margin-bottom: 15px;
      color: #ef4444;
    }
    
    .error-message h3 {
      font-size: 20px;
      margin-bottom: 8px;
      color: #e2e8f0;
    }
    
    /* 通知提示框 */
    .notification {
      position: fixed;
      bottom: 20px;
      right: 20px;
      padding: 15px 25px;
      background: linear-gradient(135deg, #10b981 0%, #0d9488 100%);
      color: white;
      border-radius: 8px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      transform: translateY(100px);
      opacity: 0;
      transition: all 0.3s ease;
      z-index: 1000;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .notification.show {
      transform: translateY(0);
      opacity: 1;
    }
    
    /* 连接状态指示器 */
    .status-indicator {
      display: inline-block;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      margin-right: 8px;
    }
    
    .status-online {
      background-color: #10b981;
      box-shadow: 0 0 8px #10b981;
    }
    
    .status-offline {
      background-color: #f87171;
    }
    
    .connection-status {
      position: fixed;
      bottom: 20px;
      left: 20px;
      padding: 8px 16px;
      background: rgba(15, 23, 42, 0.9);
      border-radius: 20px;
      font-size: 14px;
      display: flex;
      align-items: center;
      border: 1px solid rgba(94, 234, 212, 0.2);
    }
    
    /* 响应式设计 */
    @media (max-width: 1024px) {
      .top-rank-container {
        gap: 15px;
      }
      
      .top-rank-item {
        width: 150px;
      }
      
      .top-rank-1 {
        height: 240px;
      }
      
      .top-rank-2 {
        height: 200px;
      }
      
      .top-rank-3 {
        height: 160px;
      }
    }
    
    @media (max-width: 768px) {
      header {
        flex-direction: column;
        gap: 20px;
        text-align: center;
      }
      
      .nav-buttons {
        width: 100%;
        justify-content: center;
        flex-wrap: wrap;
      }
      
      .page-title {
        font-size: 28px;
        margin: 10px 0 25px;
      }
      
      .page-title::after {
        width: 150px;
      }
      
      .filter-controls {
        flex-direction: column;
        align-items: stretch;
      }
      
      .filter-group {
        flex-direction: column;
        align-items: stretch;
      }
      
      .top-rank-container {
        flex-direction: column;
        align-items: center;
        gap: 20px;
      }
      
      .top-rank-item {
        width: 100%;
        height: auto !important;
      }
      
      .ranking-table {
        min-width: 600px;
        overflow-x: auto;
        display: block;
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div class="logo">
        <div class="logo-icon"><i class="fas fa-chart-network"></i></div>
        <div class="logo-text">数据<span>看板</span>系统</div>
      </div>
      <div class="nav-buttons">
        <a href="index.html" class="nav-button"><i class="fas fa-home"></i> 首页</a>
        <a href="upload.html" class="nav-button"><i class="fas fa-cloud-upload-alt"></i> 数据上传</a>
        <a href="query.html" class="nav-button"><i class="fas fa-search"></i> 数据查询</a>
        <a href="ranking.html" class="nav-button active"><i class="fas fa-trophy"></i> 排行榜</a>
      </div>
    </header>
    
    <h1 class="page-title"><i class="fas fa-trophy"></i> 数据排行榜</h1>
    
    <!-- 筛选控制 -->
    <div class="filter-controls">
      <div class="filter-group">
        <label class="filter-label"><i class="fas fa-clock"></i> 时间范围</label>
        <select id="timeRange" class="filter-select">
          <option value="day">今日</option>
          <option value="week" selected>本周</option>
          <option value="month">本月</option>
          <option value="quarter">本季度</option>
          <option value="year">本年</option>
        </select>
      </div>
      
      <div class="filter-group">
        <label class="filter-label"><i class="fas fa-list"></i> 排行类型</label>
        <select id="contentType" class="filter-select">
          <option value="host">主持人数据排行</option>
          <option value="hall">厅名数据排行</option>
          <option value="overall">各厅主持数据排名</option>
        </select>
      </div>
      
      <button type="button" id="refreshRanking" class="refresh-btn">
        <i class="fas fa-sync-alt"></i> 刷新数据
      </button>
    </div>
    
    <!-- 排行榜内容 -->
    <div class="ranking-container" id="rankingContent">
      <!-- 排行榜内容将动态加载 -->
      <div class="spinner"></div>
    </div>
    
    <footer>
      <p>数据看板系统 © 2023 | 实时数据监控与分析平台</p>
      <p style="margin-top: 8px; font-size: 13px; color: #64748b;">版本 2.1.0 | 最后更新: 2025-08-06</p>
    </footer>
  </div>

  <!-- 通知提示框 -->
  <div class="notification" id="notification">
    <i class="fas fa-check-circle"></i>
    <div>操作成功</div>
  </div>
  
  <!-- 连接状态指示器 -->
  <div class="connection-status" id="connectionStatus">
    <span class="status-indicator status-online"></span>
    <span>后端服务已连接</span>
  </div>

  <script>
    const API_BASE_URL = 'http://localhost:3000/api/ranking';
    
    document.addEventListener('DOMContentLoaded', function() {
      // 初始加载数据
      loadRankingData();
      
      // 刷新按钮事件
      document.getElementById('refreshRanking').addEventListener('click', function() {
        const btn = this;
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 刷新中...';
        loadRankingData().then(() => {
          btn.innerHTML = '<i class="fas fa-sync-alt"></i> 刷新数据';
          showNotification('数据已更新');
        }).catch(() => {
          btn.innerHTML = '<i class="fas fa-sync-alt"></i> 刷新数据';
          showNotification('刷新失败，请重试', true);
        });
      });
      
      // 筛选条件变化时重新加载
      document.getElementById('timeRange').addEventListener('change', loadRankingData);
      document.getElementById('contentType').addEventListener('change', loadRankingData);
      
      // 模拟WebSocket连接状态
      simulateWebSocket();
    });
    
    // 获取并渲染排行榜数据
    async function loadRankingData() {
      const timeRange = document.getElementById('timeRange').value;
      const contentType = document.getElementById('contentType').value;
      const rankingContent = document.getElementById('rankingContent');
      
      // 显示加载动画
      rankingContent.innerHTML = '<div class="spinner"></div>';
      
      try {
        const response = await fetch(`${API_BASE_URL}?type=${contentType}&range=${timeRange}`);
        const data = await response.json();
       const rankings = data.rankings;
        if (!response.ok) throw new Error(data.error || '获取排行榜失败');
        
        if (rankings.length === 0) {
          rankingContent.innerHTML = `
            <div style="text-align: center; padding: 50px;">
              <i class="fas fa-trophy" style="font-size: 40px; color: #64748b; margin-bottom: 20px; display: block;"></i>
              <p style="font-size: 18px; color: #94a3b8;">暂无数据，请先上传数据</p>
            </div>
          `;
          return;
        }
        
        // 根据不同排行类型生成不同的HTML
        let rankingHtml = '';
        
        // 生成前三名展示（所有类型都显示前三名特殊样式）
        rankingHtml += `
          <div class="top-rank-container">
            ${rankings.slice(0, 3).map((item, index) => `
              <div class="top-rank-item top-rank-${index + 1}">
                <div class="rank-label">TOP ${index + 1}</div>
                <div class="top-rank-medal">${index + 1}</div>
                <div class="top-rank-info">
                  <div class="top-rank-name">${getDisplayName(item, contentType)}</div>
                  <div class="top-rank-value">${Number(item.totalValue || item.dataValue).toLocaleString()}</div>
                </div>
              </div>
            `).join('')}
          </div>
        `;
        
        // 生成排行榜表格 - 显示所有数据
        rankingHtml += `
          <table class="ranking-table">
            <thead>
              <tr>
                ${getTableHeaders(contentType)}
              </tr>
            </thead>
            <tbody>
              ${rankings.map((item, index) => `
                <tr>
                  ${getTableCells(item, index, contentType)}
                </tr>
              `).join('')}
            </tbody>
          </table>
        `;
        
        rankingContent.innerHTML = rankingHtml;
        
      } catch (error) {
        console.error('获取排行榜失败:', error);
        rankingContent.innerHTML = `
          <div class="error-message">
            <i class="fas fa-exclamation-circle"></i>
            <h3>获取排行榜数据失败</h3>
            <p>${error.message}</p>
            <p>请稍后重试</p>
          </div>
        `;
      }
    }
    
    // 获取显示名称
    function getDisplayName(item, type) {
      switch(type) {
        case 'host':
          return item.hostName || '未知主持人';
        case 'hall':
          return item.hallName || '未知厅名';
        case 'overall':
          return `${item.hallName || '未知厅名'} - ${item.hostName || '未知主持人'}`;
        case 'bigHead':
          return item.hostName || '未知主持人';
        default:
          return '未知';
      }
    }
    
    // 获取表格头部
    function getTableHeaders(type) {
      switch(type) {
        case 'host':
          return `
            <th width="10%">排名</th>
            <th width="30%">主持人</th>
            <th width="20%">总数据值</th>
            <th width="20%">数据记录数</th>
          `;
        case 'hall':
          return `
            <th width="10%">排名</th>
            <th width="30%">厅名</th>
            <th width="20%">总数据值</th>
            <th width="20%">平均数据值</th>
            <th width="20%">数据记录数</th>
          `;
        case 'overall':
          return `
            <th width="10%">排名</th>
            <th width="30%">厅名</th>
            <th width="30%">主持人</th>
            <th width="30%">数据值</th>
          `;
        case 'bigHead':
          return `
            <th width="10%">排名</th>
            <th width="30%">主持人</th>
            <th width="20%">所属厅名</th>
            <th width="20%">大头数据值</th>
            <th width="20%">数据记录数</th>
          `;
        default:
          return `
            <th width="10%">排名</th>
            <th width="40%">名称</th>
            <th width="50%">数据值</th>
          `;
      }
    }
    
    // 获取表格单元格内容
    function getTableCells(item, index, type) {
      const rank = index + 1;
      
      switch(type) {
        case 'host':
          return `
            <td>
              <div class="rank-position">
                <div class="rank-number">${rank}</div>
                ${rank <= 3 ? `<i class="fas fa-crown" style="color: ${rank === 1 ? '#fbbf24' : rank === 2 ? '#94a3b8' : '#f97316'}"></i>` : ''}
              </div>
            </td>
            <td>${item.hostName || '未知主持人'}</td>
            <td class="rank-value">${Number(item.totalValue).toLocaleString()}</td>
            <td>${item.recordCount || 0}</td>
          `;
        case 'hall':
          return `
            <td>
              <div class="rank-position">
                <div class="rank-number">${rank}</div>
                ${rank <= 3 ? `<i class="fas fa-crown" style="color: ${rank === 1 ? '#fbbf24' : rank === 2 ? '#94a3b8' : '#f97316'}"></i>` : ''}
              </div>
            </td>
            <td>${item.hallName || '未知厅名'}</td>
            <td class="rank-value">${Number(item.totalValue).toLocaleString()}</td>
            <td>${Number(item.averageValue).toLocaleString()}</td>
            <td>${item.recordCount || 0}</td>
          `;
        case 'overall':
          return `
            <td>
              <div class="rank-position">
                <div class="rank-number">${rank}</div>
              </div>
            </td>
            <td>${item.hallName || '未知厅名'}</td>
            <td>${item.hostName || '未知主持人'}</td>
            <td class="rank-value">${Number(item.dataValue).toLocaleString()}</td>
          `;
        case 'bigHead':
          return `
            <td>
              <div class="rank-position">
                <div class="rank-number">${rank}</div>
                ${rank <= 3 ? `<i class="fas fa-crown" style="color: ${rank === 1 ? '#fbbf24' : rank === 2 ? '#94a3b8' : '#f97316'}"></i>` : ''}
              </div>
            </td>
            <td>${item.hostName || '未知主持人'}</td>
            <td>${item.hallName || '未知厅名'}</td>
            <td class="rank-value">${Number(item.totalValue).toLocaleString()}</td>
            <td>${item.recordCount || 0}</td>
          `;
        default:
          return `
            <td>
              <div class="rank-position">
                <div class="rank-number">${rank}</div>
              </div>
            </td>
            <td>${getDisplayName(item, type)}</td>
            <td class="rank-value">${Number(item.totalValue || item.dataValue).toLocaleString()}</td>
          `;
      }
    }
    
    // 显示通知
    function showNotification(message, isError = false) {
      const notification = document.getElementById('notification');
      notification.innerHTML = isError 
        ? `<i class="fas fa-exclamation-circle"></i> <div>${message}</div>`
        : `<i class="fas fa-check-circle"></i> <div>${message}</div>`;
      
      notification.style.background = isError
        ? 'linear-gradient(135deg, #ef4444 0%, #dc2626 100%)'
        : 'linear-gradient(135deg, #10b981 0%, #059669 100%)';
      
      notification.classList.add('show');
      
      setTimeout(() => {
        notification.classList.remove('show');
      }, 3000);
    }
    
    // 模拟WebSocket连接状态
    function simulateWebSocket() {
      const connectionStatus = document.getElementById('connectionStatus');
      const statusIndicator = connectionStatus.querySelector('.status-indicator');
      
      // 随机模拟连接状态变化（实际项目中应使用真实WebSocket）
      setInterval(() => {
        // 80%概率保持连接，20%概率短暂断开
        if (Math.random() < 0.2) {
          statusIndicator.className = 'status-indicator status-offline';
          connectionStatus.querySelector('span:last-child').textContent = '后端服务已断开';
          
          // 3秒后恢复连接
          setTimeout(() => {
            statusIndicator.className = 'status-indicator status-online';
            connectionStatus.querySelector('span:last-child').textContent = '后端服务已连接';
            showNotification('已重新连接到后端服务');
          }, 3000);
        }
      }, 30000);
    }
  </script>
</body>
</html>
    